import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select, List, Tag } from 'antd';
import { CopyOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';
import InputNumber from 'antd/es/input-number';

const { Title, Paragraph } = Typography;
const { TextArea } = Input;
const { Option } = Select;

/**
 * 标题生成功能
 * 根据文章内容生成吸引人的标题
 */
const TitleGenerationPage: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [generatedTitles, setGeneratedTitles] = useState<string[]>([]);
  const [titleCount, setTitleCount] = useState<number>(5);
  const [selectedTitleType, setSelectedTitleType] = useState<string>('attractive');
  const [tourVisible, setTourVisible] = useState<boolean>(false);
  
  // 创建ref引用
  const articleContentRef = useRef<HTMLDivElement>(null);
  const keywordsRef = useRef<HTMLDivElement>(null);
  const titleTypeRef = useRef<HTMLDivElement>(null);
  const titleCountRef = useRef<HTMLDivElement>(null);
  const generateButtonRef = useRef<HTMLDivElement>(null);
  const titleResultRef = useRef<HTMLDivElement>(null);
  
  // 组织ref引用
  const tourRefs = {
    articleContent: articleContentRef,
    keywords: keywordsRef,
    titleType: titleTypeRef,
    titleCount: titleCountRef,
    generateButton: generateButtonRef,
    titleResult: titleResultRef
  };
  
  // 定义steps配置
  const tourSteps = [
    {
      key: 'articleContent',
      title: '输入文章内容',
      description: '请输入需要生成标题的文章内容，系统将根据内容生成相关标题',
    },
    {
      key: 'keywords',
      title: '添加关键词（可选）',
      description: '输入与内容相关的关键词，用逗号分隔，可以帮助系统更准确地生成标题',
    },
    {
      key: 'titleType',
      title: '选择标题类型',
      description: '选择您想要的标题风格，如吸引人、专业严谨、悬念式等',
    },
    {
      key: 'titleCount',
      title: '设置标题数量',
      description: '设置您希望生成的标题数量，最多可生成20个标题',
    },
    {
      key: 'generateButton',
      title: '生成标题',
      description: '点击此按钮开始AI标题生成过程',
    },
    {
      key: 'titleResult',
      title: '查看生成的标题',
      description: '生成完成后，您可以查看、复制单个标题或所有标题',
    },
  ];
  
  // 显示引导
  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 标题类型选项
  const titleTypes = [
    { value: 'attractive', label: '吸引人', description: '吸引读者注意力的标题' },
    { value: 'professional', label: '专业严谨', description: '适合学术或专业内容的标题' },
    { value: 'clickbait', label: '悬念式', description: '激发读者好奇心的标题' },
    { value: 'storytelling', label: '故事化', description: '带有叙事性的标题' },
    { value: 'howto', label: '指南式', description: '提供方法或解决方案的标题' },
    { value: 'question', label: '问题式', description: '以问题形式呈现的标题' },
  ];

  // 处理标题类型变化
  const handleTitleTypeChange = (value: string) => {
    setSelectedTitleType(value);
  };

  // 处理标题数量变化
  const handleTitleCountChange = (value?: any) => {
    if (value !== undefined) {
      setTitleCount(value);
    }
  };

  // 处理表单提交，生成标题
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      const articleContent = values.articleContent || '';
      const keywords = values.keywords || '';
      
      if (!articleContent.trim()) {
        message.warning('请输入文章内容');
        return;
      }
      
      setLoading(true);
      setGeneratedTitles([]);
      
      // 模拟API调用延迟
      setTimeout(() => {
        const titles = generateTitles(articleContent, selectedTitleType, titleCount, keywords);
        setGeneratedTitles(titles);
        setLoading(false);
        message.success('标题生成成功！');
      }, 1500);
    } catch (error) {
      setLoading(false);
      message.error('生成失败，请重试');
    }
  };

  // 生成标题的模拟函数
  const generateTitles = (content: string, type: string, count: number, keywords?: string): string[] => {
    // 这里是模拟生成标题的逻辑，实际应用中应该调用AI模型
    const titleGenerators: Record<string, (c: string, k?: string) => string[]> = {
      'attractive': (c, k) => [
        `震撼！${c.slice(0, 20)}...的惊人真相`,
        `${c.slice(0, 15)}...到底有什么秘密？`,
        `你绝对不知道的${k || '内容'}技巧，让人大开眼界`,
        `${c.slice(0, 10)}...背后的故事，太精彩了`,
        `专家都在用的${k || '这个'}方法，效果惊人`,
      ],
      'professional': (c, k) => [
        `${c.slice(0, 25)}...的系统分析与实践`,
        `${k || '相关主题'}研究：${c.slice(0, 20)}...的理论框架`,
        `${c.slice(0, 15)}...的关键问题与解决策略`,
        `${k || '专业领域'}视角下的${c.slice(0, 15)}...研究`,
        `${c.slice(0, 20)}...的方法论研究与应用`,
      ],
      'clickbait': (c, k) => [
        `看到${c.slice(0, 15)}...的结果，我惊呆了`,
        `为什么专家都不愿公开${k || '这方面'}的秘密？`,
        `做了${c.slice(0, 10)}...后，我的生活彻底改变了`,
        `99%的人都不知道的${k || '这个'}小技巧`,
        `当我尝试了${c.slice(0, 15)}...后，发生了什么？`,
      ],
      'storytelling': (c, k) => [
        `${c.slice(0, 15)}...的故事：从平凡到卓越`,
        `一个关于${k || '坚持'}的故事：${c.slice(0, 20)}...`,
        `在${c.slice(0, 10)}...的日子里，我学到了什么`,
        `${c.slice(0, 15)}...背后的感人故事`,
        `从失败到成功：${c.slice(0, 15)}...的逆袭之路`,
      ],
      'howto': (c, k) => [
        `如何在30天内掌握${k || c.slice(0, 15)}...`,
        `从零开始学习${k || '这个技能'}：${c.slice(0, 15)}...指南`,
        `${c.slice(0, 15)}...完全指南：从入门到精通`,
        `专家教你如何有效解决${k || '这个问题'}`,
        `实用技巧：如何快速提升${k || '你的能力'}`,
      ],
      'question': (c, k) => [
        `${c.slice(0, 15)}...的关键是什么？`,
        `为什么我们需要关注${k || '这个问题'}？`,
        `${c.slice(0, 10)}...对我们的未来有什么影响？`,
        `如何判断${k || '某事物'}是否适合自己？`,
        `${c.slice(0, 15)}...背后隐藏着什么？`,
      ],
    };
    
    const generator = titleGenerators[type] || titleGenerators.attractive;
    const allTitles = generator(content, keywords);
    
    // 如果请求的标题数量超过预设数量，重复使用预设标题
    const titles: string[] = [];
    for (let i = 0; i < count; i++) {
      titles.push(allTitles[i % allTitles.length]);
    }
    
    return titles;
  };

  // 复制标题
  const handleCopyTitle = (title: string) => {
    navigator.clipboard.writeText(title).then(() => {
      message.success('标题已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败，请手动复制');
    });
  };

  // 复制所有标题
  const handleCopyAllTitles = () => {
    if (generatedTitles.length === 0) {
      message.warning('没有可复制的标题');
      return;
    }
    
    const titlesText = generatedTitles.join('\n');
    navigator.clipboard.writeText(titlesText).then(() => {
      message.success('所有标题已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败，请手动复制');
    });
  };

  // 获取当前选择的标题类型描述
  const getSelectedTitleTypeDescription = (): string => {
    const selectedType = titleTypes.find(type => type.value === selectedTitleType);
    return selectedType ? selectedType.description : '';
  };

  return (
    <div style={{ padding: '24px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '16px' }}>
        <Typography>
          <Title level={1}>标题生成<TourGuideButton onClick={showTour} /></Title>
        </Typography>
      </div>
      <Typography>
        <Paragraph>
          输入文章内容，AI将根据您选择的类型生成吸引人的标题。
        </Paragraph>
      </Typography>

      <Row gutter={[16, 16]}>
        <Col xs={24} md={8}>
          <Card title="内容输入与设置" size="small">
            <Form
              form={form}
              layout="vertical"
            >
              <Form.Item
                label="文章内容"
                name="articleContent"
                rules={[{ required: true, message: '请输入文章内容' }]}
              >
                <div ref={articleContentRef}>
                  <TextArea
                    rows={10}
                    placeholder="请输入需要生成标题的文章内容"
                    maxLength={2000}
                    showCount
                  />
                </div>
              </Form.Item>

              <Form.Item
                label="关键词（可选）"
                name="keywords"
              >
                <div ref={keywordsRef}>
                  <Input placeholder="请输入与内容相关的关键词，用逗号分隔" />
                </div>
              </Form.Item>

              <Form.Item
                label="标题类型"
                name="titleType"
              >
                <div ref={titleTypeRef}>
                  <Select
                    placeholder="请选择标题类型"
                    value={selectedTitleType}
                    onChange={handleTitleTypeChange}
                    style={{ width: '100%' }}
                  >
                  {titleTypes.map(type => (
                    <Option key={type.value} value={type.value}>
                      {type.label}
                    </Option>
                  ))}
                </Select>
                </div>
              </Form.Item>

              <div style={{ marginBottom: '16px' }}>
                <Paragraph type="secondary" style={{ margin: 0 }}>
                  {getSelectedTitleTypeDescription()}
                </Paragraph>
              </div>

              <Form.Item
                label="生成标题数量"
                name="titleCount"
              >
                <div ref={titleCountRef}>
                  <InputNumber
                    min={1}
                    max={20}
                    defaultValue={5}
                    onChange={handleTitleCountChange}
                    style={{ width: '100%' }}
                  />
                </div>
              </Form.Item>

              <Form.Item>
                <div ref={generateButtonRef}>
                  <Button
                    type="primary"
                    onClick={handleSubmit}
                    loading={loading}
                    block
                  >
                    {loading ? '生成中...' : '生成标题'}
                  </Button>
                </div>
              </Form.Item>
            </Form>
          </Card>
        </Col>

        <Col xs={24} md={16}>
          <Card 
            ref={titleResultRef}
            title="生成的标题"
            size="small"
            extra={
              generatedTitles.length > 0 ? (
                <Button
                  type="primary"
                  icon={<CopyOutlined />}
                  onClick={handleCopyAllTitles}
                >
                  复制所有标题
                </Button>
              ) : null
            }
          >
            {loading ? (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <Spin size="large" />
                <p style={{ marginTop: '16px' }}>正在生成标题，请稍候...</p>
              </div>
            ) : generatedTitles.length > 0 ? (
              <List
                dataSource={generatedTitles}
                renderItem={(title, index) => (
                  <List.Item
                    key={index}
                    actions={[
                      <Button
                        key="copy"
                        type="text"
                        icon={<CopyOutlined />}
                        onClick={() => handleCopyTitle(title)}
                      >
                        复制
                      </Button>
                    ]}
                  >
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <Tag color="blue" style={{ marginRight: '12px', fontSize: '12px' }}>
                        {index + 1}
                      </Tag>
                      <Typography.Text strong style={{ fontSize: '16px', lineHeight: '1.8' }}>
                        {title}
                      </Typography.Text>
                    </div>
                  </List.Item>
                )}
              />
            ) : (
              <div style={{ textAlign: 'center', padding: '40px 0', color: '#999' }}>
                请输入文章内容，点击生成标题按钮
              </div>
            )}
          </Card>
        </Col>
      </Row>
      
      <CommonTour
        open={tourVisible}
        onClose={() => setTourVisible(false)}
        steps={tourSteps}
        targetRefs={tourRefs}
      />
    </div>
  );
};

export default TitleGenerationPage;